<template>
    <div class="dashboard-container">
        <el-card class="stat-card">
            <template #header>
                <div class="card-header">
                    <span class="title">系统概览</span>
                    <el-tag type="success">实时数据</el-tag>
                </div>
            </template>

            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="stat-item">
                        <div class="label">用户总数</div>
                        <div class="value">1,234</div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="stat-item">
                        <div class="label">商品总数</div>
                        <div class="value">567</div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="stat-item">
                        <div class="label">今日订单</div>
                        <div class="value">89</div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="stat-item">
                        <div class="label">进行中活动</div>
                        <div class="value">3</div>
                    </div>
                </el-col>
            </el-row>
        </el-card>

        <el-card class="chart-card">
            <template #header>
                <div class="card-header">
                    <span class="title">近七日数据趋势</span>
                </div>
            </template>
            <!-- 这里可以放置echarts图表 -->
            <div class="chart-placeholder"></div>
        </el-card>
    </div>
</template>

<style lang="scss" scoped>
.dashboard-container {
    padding: 20px;

    .stat-card {
        margin-bottom: 20px;

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .title {
                font-size: 18px;
                font-weight: 500;
            }
        }

        .stat-item {
            padding: 15px;
            background: #f5f7fa;
            border-radius: 4px;
            text-align: center;

            .label {
                color: #909399;
                margin-bottom: 8px;
            }

            .value {
                font-size: 24px;
                font-weight: bold;
                color: #303133;
            }
        }
    }

    .chart-card {
        .chart-placeholder {
            height: 400px;
            background: #fafafa;
            border: 1px dashed #dcdfe6;
            border-radius: 4px;
        }
    }
}
</style>